<template>
  <div class="inline-flex ax__icon w-[100%] h-[100%] flex-s" :draggable="false">
    <a-image
      :fallback="failure"
      :height="height"
      :width="width"
      v-bind="$attrs"
      :preview="false"
      :src="src"
    >
      <template #placeholder>
        <div class="w-[100%] h-[100%] flex flex-s">
          <span class="ax_icon_spin">
            <a-image :src="lazeSrc" :height="32" :width="32" :preview="false" />
          </span>
        </div>
      </template>
    </a-image>
  </div>
</template>

<script setup lang="ts">
import failure from '@/assets/failure.png';
import loading from '@/assets/loading.png';

withDefaults(
  defineProps<{
    /* 宽高 */
    width?: number | string;
    height?: number | string;
    /* 真实的src */
    src: string;
    /* 懒加载的src */
    lazeSrc?: string;
  }>(),
  {
    lazeSrc: loading,
  },
);
</script>

<style lang="scss" scoped>
.ax__icon {
  border-radius: var(--radius);
}
.ax_icon_spin {
  display: inline-flex;
  animation: spin 1s linear infinite !important; /* 旋转动画 */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
